import React, { FC, useEffect, useRef } from 'react'
import {inject,observer} from 'mobx-react'
import Mytitle from '../../../../components/Mytitle'
import * as echarts from 'echarts';
import { Col, Row } from 'antd';
const Data:FC<any>=({
  user
})=> {
  const {getUserList,userList,changeuser,filterUserList}=user
  useEffect(()=>{
    //获取过滤自己用户数据
    getUserList()
   
   
  },[])


  //Echarts表
  const chartOne:any=useRef()
  const chartTwo:any=useRef()

  
  const setEchartInit=()=>{
    console.log(chartOne);
    var myChart = echarts.init(chartOne.current);
  var option = {
    xAxis: {
      type: 'category',
      data: ['管理员', '校长', '班主任', '讲师', '学员']
    },
    yAxis: {
      type: 'value',
      name: '人数',
    },
    series: [
      {
        data: [userList?(userList.filter((v:any)=>v.role==5)).length:2, userList?(userList.filter((v:any)=>v.role==4)).length:2, userList?(userList.filter((v:any)=>v.role==3)).length:2, userList?(userList.filter((v:any)=>v.role==2)).length:2, userList?(userList.filter((v:any)=>v.role==1)).length:1],
        type: 'bar'
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  }
  const setEchartInit1=()=>{
    console.log(chartTwo);
    var myChart1 = echarts.init(chartTwo.current);
  var option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: '人数',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '40',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: userList?(userList.filter((v:any)=>v.role==5)).length:2, name: '管理员' },
          { value: userList?(userList.filter((v:any)=>v.role==4)).length:3, name: '校长' },
          { value: userList?(userList.filter((v:any)=>v.role==3)).length:4, name: '班主任' },
          { value: userList?(userList.filter((v:any)=>v.role==2)).length:3, name: '讲师' },
          { value: userList?(userList.filter((v:any)=>v.role==1)).length:3, name: '学员' }
        ]
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option);
  
 
  }
  console.log(userList);
  
  if(chartOne.current){
    setEchartInit1()
    setEchartInit()
  }
  
  // let a=userList.filter((v:any)=>v.role==5)
  // console.log(a.length);
  
  // console.log(userList.filter((v:any)=>v.role==5));
  

  
  return (
    <div>
        <Mytitle text="用户分析"></Mytitle>
        <Row>
          <Col span={11}>
          <div
                ref={chartTwo}
                style={{width:'100%',height:400}}          
            ></div>
          </Col>
          <Col span={11} offset={1}>
          <div
                ref={chartOne}
                style={{width:'100%',height:400}}          
            ></div>
          </Col>
        </Row>
    </div>
  )
}
export default inject('user')(observer(Data))
